<template>
  <div class="rose-echart">
    <base-echart :options="options"></base-echart>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import baseEchart from '@/base-ui/base-echart';
import { IChartDataType } from '../types';

const props = defineProps<{
  roseData: IChartDataType[];
}>();

const options = computed(() => ({
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [10, 120],
      bottom: '10%',
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: props.roseData,
      label: {
        show: false
      }
    }
  ]
}));
</script>

<style lang="scss" scoped></style>
